<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

</html>

<head>

    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" /> -->
    <!-- <title id="title-meta">安捷能源</title> -->

    <!-- 本页面对应css -->
    <link rel="stylesheet" th:href="@{/css/strategy-center-style-2.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/js/elementui/theme-chalk/index.css}"/>


    <!-- 引入公共css -->
    <div th:insert="main :: common_head"></div>
    <style>
        .el-main{
            margin-top: 10px;
        }
        .el-row {
            margin-bottom: 20px;
            display: flex;
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-blue-dark {
            background: #0b2746;
        }
        .bg-black {
            height: 820px;
            width: 32%;
            background: #061a34;
            margin: 20px;
            border: 1px solid #0b467c;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
        #app{
            padding:0px;
            margin:0px;
            /*position:absolute;*/
            top:0px;
            left:0px;
            width:100%;
            /*height:100%;*/
            border:hidden;
        }
        .control-select-word{
            color: white;
            margin: 4px 10px;
        }
        .el-select{
            width: 160px!important;
        }
        .el-input__inner{
            background-color: #0b2744!important;
        }
        .el-input__icon{
            height: 68%;
        }
        .el-input--mini,.el-input__inner{
            width:160px;
            color: white!important;
        }
        .el-date-editor.el-input{
            width:162px;
        }
        /*!*隐藏3个元素的滚动条*!*/
        /*.strategy-details::-webkit-scrollbar{*/
        /*    display: none!important;*/
        /*}*/
        /*!*隐藏小块*!*/
        /*.strategy-style::-webkit-scrollbar{*/
        /*    display: none!important;*/
        /*}*/
        .top{
            height: 50px;
            width: 99%;
            margin: 0 10px 10px 10px;
        }
        .bottom{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }
        body,html{
            height: 100%;
            width: 100%;
        }
        body{
            background-color: #0c1226;
            overflow-y:auto;
        }
        #content{
            background-color: #0c1226
        }
    </style>

</head>

<body style="height: 100%;">
<div class="row-fluid">
    <div id="content" class="span10" style="width: 100%;min-height: 500px!important;">
        <div id="app">
            <div class="grid-content bg-blue-dark top">
                    <div class="new-strategy">
                    <div class="new-strategy-control">
                        <div class="control-select">
                            <div class="control-select-word">起止时间</div>
                            <el-date-picker v-model="startTime" type="date" placeholder="开始日期" size="mini"
                                            popper-class="control-select-selector"></el-date-picker>
                            <el-date-picker v-model="endTime" type="date" placeholder="截止日期" size="mini"
                                            popper-class="control-select-selector"></el-date-picker>
                                <div class="control-select-word">源模型</div>
                            <el-select v-model="source_mode" placeholder="源模型" size="mini"
                                       popper-class="control-select-selector" @change="selectChange1()">
                                <el-option v-for="item in source_modes" :key="item.modelVersion"
                                           :label="item.modelName" :value="item.modelVersion">
                                    <el-tooltip placement="right-end"
                                                effect="light"
                                                :content="item.modelInfo">
                                        <el-button type="text" style="width:100%;color:black;text-align: left">
                                            {{item.modelName}}
                                        </el-button>
                                    </el-tooltip>
                                </el-option>
                            </el-select>
                            <div class="control-select-word">目标模型</div>
                            <el-select v-model="target_mode" placeholder="目标模型" size="mini"
                                       popper-class="control-select-selector" @change="selectChange2()">
                                <el-option v-for="item in source_modes" :key="item.modelVersion"
                                           :label="item.modelName" :value="item.modelVersion">
                                    <el-tooltip placement="left"
                                                effect="light"
                                                :content="item.modelInfo">
                                        <el-button type="text" style="width:100%;color:black;text-align: left">
                                            {{item.modelName}}
                                        </el-button>
                                    </el-tooltip>
                                </el-option>
                            </el-select>
                        </div>
                        <div style="margin-right: 20px">
                            <el-button type="primary" size="small" @click="getStrategy">生成数据</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom bg-blue-dark">
                <div class="grid-content bg-black">
                    <div class="first-items" id="first-items">
                    <div class="left-energy-graph">
                        <div class="item-top-tilte">实际工况</div>
                        <div class="strategy-details" id="strategy-details1">
                            <div v-for="items in historyList" class="strategy-detail">
                                <div class="timer-style">{{items.date}}</div>
                                <div class="strategy-style">
                                    <div v-for="item in items.strategyList" class="strategy-line-item">
                                        <div class="strategy-content-style">
                                            <img class="strategy-pic-style" th:src="@{img/view-titleCircle.png}">
                                            <div class="strategy-date-style">
                                                {{item.span}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>

                <div class="grid-content bg-black">
                    <div class="second-items" id="second-items">
                        <div class="left-energy-graph">
                            <div class="item-top-tilte" id="src_mod">源模型使用工况</div>
                            <div class="strategy-details" id="strategy-details2">
                                <div v-for="items in sourceList" class="strategy-detail">
                                    <div class="timer-style">{{items.date}}</div>
                                    <div class="strategy-style">
                                        <div v-for="item in items.strategyList" class="strategy-line-item">
                                            <div class="strategy-content-style">
                                                <img class="strategy-pic-style" th:src="@{img/view-titleCircle.png}">
                                                <div class="strategy-date-style">
                                                    {{item.span}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid-content bg-black">
                    <div class="three-items" id="three-items">
                        <div class="left-energy-graph">
                            <div class="item-top-tilte" id="trg_mod">目标模型工况</div>
                            <div class="strategy-details" id="strategy-details3">
                                <div v-for="items in targetList" class="strategy-detail">
                                    <div class="timer-style">{{items.date}}</div>
                                    <div class="strategy-style">
                                        <div v-for="item in items.strategyList" class="strategy-line-item">
                                            <div class="strategy-content-style">
                                                <img class="strategy-pic-style" th:src="@{img/view-titleCircle.png}">
                                                <div class="strategy-date-style">
                                                    {{item.span}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script th:src="@{/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/js/echarts.min.js}"></script>
<script th:src="@{/js/time.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/js/jquery.blockUI.js}"></script>
<script th:src="@{/js/tools.js}"></script>
<script th:inline="javascript" th:src="@{/js/vue.min.js}"></script>
<script th:inline="javascript" th:src="@{/js/vue.js}"></script>
<!--    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>-->
<script th:src="@{/js/elementui/index.js}"></script>


<!--    &lt;!&ndash; import Vue before Element &ndash;&gt;-->
<!--    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>-->
<!--    &lt;!&ndash; import JavaScript &ndash;&gt;-->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<script>
    $(function () {
        //三个div滚动条一起滚动
        $("#strategy-details1").mouseover(function () {
            $(this).on("scroll", function () {
                $("#strategy-details2").scrollTop($(this).scrollTop()); // 纵向滚动条
                $("#strategy-details3").scrollTop($(this).scrollTop()); // 纵向滚动条
            });
        }).mouseout(function () {
            $(this).unbind("scroll");
        });
        $("#strategy-details2").mouseover(function () {
            $(this).on("scroll", function () {
                $("#strategy-details1").scrollTop($(this).scrollTop()); // 纵向滚动条
                $("#strategy-details3").scrollTop($(this).scrollTop()); // 纵向滚动条
            });
        }).mouseout(function () {
            $(this).unbind("scroll");
        });
        $("#strategy-details3").mouseover(function () {
            $(this).on("scroll", function () {
                // $("#data1").scrollLeft($(this).scrollLeft()); // 横向滚动条
                $("#strategy-details1").scrollTop($(this).scrollTop()); // 纵向滚动条
                $("#strategy-details2").scrollTop($(this).scrollTop()); // 纵向滚动条
            });
        }).mouseout(function () {
            $(this).unbind("scroll");
        });
    })


    var vm = new Vue({
        el: '#app',
        data: {
            startTime: '',
            endTime: '',
            target_mode: '',
            source_mode: '',
            source_modes: [],
            sourceList: [],
            targetList: [],
            historyList: [],
            source_mode_name: '',
            target_mode_name: ''
        },
        created:function() {
            this.getAllMode()
        },
        mounted:function () {
            parent.modifyTitle("工况对比");
        },
        methods: {
            getAllMode: function () {
                that = this
                $.ajax({
                    type: "POST",
                    url: "model/energy/getall",
                    dataType: "json",
                    data: {
                        "deviceCode": "yc467",
                    },
                    async: true,
                    success: function (data) {
                        that.source_mode_name = data.data[0].modelName;
                        that.target_mode_name = data.data[1].modelName;
                        if (data.status == 200) {
                            var srcData = data.data;
                            for (var i = 0; i < srcData.length; i++) {
                                if (srcData[i].used) {
                                    srcData[i].modelName = srcData[i].modelName+"(使用中)"
                                }
                            }
                            console.log('srcData');
                            console.log(srcData);
                            that.source_modes = srcData;
                        } else {
                            layer.alert(data.msg, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    },
                    failure: function (data) {
                        layer.alert(data.msg, {
                            icon: 5,
                            title: "提示"
                        });
                    }
                })
            },
            getStrategy: function () {
                that = this
                that.historyList = []
                that.sourceList = []
                that.targetList = []
                console.log(that);
                let data = {
                    "startTime": that.startTime,
                    "endTime": that.endTime,
                    "sourceModelId": that.source_mode,
                    "targetModelId": that.target_mode
                }
                $.ajax({
                    type: "POST",
                    url: "model/strategy/compare",
                    dataType: "json",
                    contentType: "application/json",
                    async: true,
                    data: JSON.stringify(data),
                    success: function (data) {
                        console.log("data:",data);
                        if (data.status == 200) {
                            ["historyList", "sourceList", "targetList"].forEach(elem => {
                                let dates = data.data["dateList"]
                                let list = data.data[elem]
                                for (let i = 0; i < dates.length; ++i) {
                                    that[elem].push({
                                        "date": dates[i],
                                        "strategyList": list[i]
                                    })
                                }
                            });
                        } else {
                            layer.alert(data.msg, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    },
                    failure: function (data) {
                        layer.alert(data.msg, {
                            icon: 5,
                            title: "提示"
                        });
                    }
                })

            },
            selectChange1: function () {
                let source_mode_name = ""
                that = this;
                this.source_modes.forEach(function(item){
                    console.log(that.source_mode,item.modelVersion, item.modelName)
                    if (item.modelVersion == that.source_mode) {
                        source_mode_name = item.modelName
                    }
                });
                $("#src_mod").html(source_mode_name + "使用工况")
            },
            selectChange2: function () {
                that = this
                let targe_mode_name = ""
                this.source_modes.forEach(function(item){
                    if (item.modelVersion == that.target_mode) {
                        targe_mode_name = item.modelName
                    }
                });
                $("#trg_mod").html(targe_mode_name + "使用工况")
            }

        }
    });
</script>

<script th:src="@{/js/detect-element-resize.js}"></script>
<script th:src="@{/js/iframe-resize.js}"></script>

</body>

</html>